<template>
  <a-tabs
    v-if="oshiInfo"
    v-model:activeKey="activeKey"
  >
    <a-tab-pane
      :key="1"
      tab="CPU"
    >
      <template
        v-for="(val, key) in oshiInfo.cpu"
        :key="key"
      >
        <a-statistic
          :title="key"
          :value="val"
          style="margin-right: 10px"
        />
      </template>
    </a-tab-pane>
    <a-tab-pane
      :key="2"
      tab="JVM"
      force-render
    >
      <template
        v-for="(val, key) in oshiInfo.jvm"
        :key="key"
      >
        <a-statistic
          :title="key"
          :value="val"
          style="margin-right: 10px"
        />
      </template>
    </a-tab-pane>
    <a-tab-pane
      :key="3"
      tab="内存"
    >
      <template
        v-for="(val, key) in oshiInfo.mem"
        :key="key"
      >
        <a-statistic
          :title="key"
          :value="val"
          style="margin-right: 10px"
        />
      </template>
    </a-tab-pane>
    <a-tab-pane
      :key="4"
      tab="磁盘"
    >
      <template
        v-for="(val, key) in oshiInfo.sys"
        :key="key"
      >
        <a-statistic
          :title="key"
          :value="val"
          style="margin-right: 10px"
        />
      </template>
    </a-tab-pane>
    <a-tab-pane
      :key="5"
      tab="系统"
    >
      <template
        v-for="(item, index) in oshiInfo.sysFiles"
        :key="index"
      >
        <a-statistic
          :title="key"
          :value="val"
          style="margin-right: 10px"
        />
      </template>
    </a-tab-pane>
  </a-tabs>
</template>

<script>
import apiOshi from '@/config/api/api-oshi';

export default {
    data() {
        return {
            activeKey: 1,
            oshiInfo: undefined
        }
    },
    mounted() {
        console.log(apiOshi)
        apiOshi.oshi().then(res => {
            this.oshiInfo = res;
        })
    }
}
</script>

<style>
</style>